<template>
	<view>
		<!-- 导航 -->
		<u-navbar :title="titleName" :background="background" :border-bottom="false" title-color="#fff"
			back-icon-color="#fff" title-size="24rpx" title-width="560rpx" :custom-back="customBack"></u-navbar>
		<!-- 弹幕 -->
		<view style="height: 44rpx;position: absolute;z-index: 2;top: 160rpx;width: 100%;">
			<lff-barrage ref="lffBarrage" type="rightToLeft"></lff-barrage>
		</view>
		<!-- 展示 -->
		<view class="Exhibition f-jc-ac">
			<image :src="detaildNew.imgurl"></image>
		</view>
		<!-- 展示内容 -->
		<view class="news">
			<view class="top omits">
				{{detaildNew.title}}
			</view>
			<view class="body">
				市场参考价 ¥{{detaildNew.price}}元
			</view>
			<view class="body">
				商品抽赏存在概率性，请谨慎购买
			</view>
			<view class="end f-ac-jb" v-if="record == false">
				<view v-for="(value,index) in cateShop" :key="index" :style="{color:value.color}">
					<view>{{value.title}}</view>
					<view>{{value.num}}%</view>
				</view>
				<view class="detali" @click="Jumprecord">
					中赏记录
				</view>
			</view>

			<view class="end f-ac-jb" v-if="record == true">
				<view v-for="(value,index) in rewardArr" :key="index" class="end-top" @click="getrewardArr(value.id)"
					:class="show == value.id ? 'end-end' : 'end-top'">
					{{value.name}}
				</view>
				<view class="detali f-jc-ac" @click="Jumprecord">
					<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/leftRess.png"></image>
					返回
				</view>
			</view>


			<view class="bottom" v-if="record == false">
				<view class="bottom-top" v-for="(value,index) in ShopList" :key="index"
					:style="{color:value.cate_color}">
					<view class="start f-jc-ac" :style="{borderColor:value.cate_color}">
						<view :style="[{background:`url(${value.imgurl})`}]" class="images"
							@click="getImage(value.imgurl,value.title,value.price)"></view>
						<view :style="{background:`rgba(${value.cate_color2})`}">
							{{value.cate_title}}
						</view>
					</view>
					<view class="omit" style="color: #fff;">
						{{value.title}}
					</view>
				</view>
				<view class="bottom-top" style="height: 0;margin: 0;" />
				<view class="bottom-top" style="height: 0;margin: 0;" />
			</view>
			<template v-if="record == true">
				<view class="bottom" v-for="(value,index) in Winningrecord" :key="index"
					style="display: flex;flex-direction: column;position: relative;">
					<view class="bottom-start f-ac-jb">
						<image :src="value.headimg"></image>
						<view class="omit" style="width: 100rpx;">{{value.user_mobile}}</view>
						<view :style="{color:value.cate_color}">{{value.cate_title}}</view>
						<view class="omit" style="width: 250rpx;">{{value.goodslist_title}}</view>
						<image :src="value.imgurl"></image>
					</view>
					<view style="height: 50rpx;" v-if="value.next_num"></view>
					<view v-if="value.next_num" class="f-ac"
						style="justify-content: space-between;position: absolute;bottom: 0;left: 0;">
						<view style="width: 1px;height: 18px;background: #FFFFFF;margin-right: 10rpx;"></view>
						<view style="font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;">
							X{{value.next_num}}发</view>
						<view style="width: 1px;height: 18px;background: #FFFFFF;margin-left: 10rpx;"></view>
					</view>
				</view>
			</template>
			<view style="height: 150rpx;" />
		</view>
		<!-- 底部按钮 -->
		<view class="button f-ac-jb">
			<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/Drawones.png" @click="luckDatails(1)">
			</image>
			<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/Drawthrees.png"
				@click="luckDatails(3)">
			</image>
			<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/Drawfives.png" @click="luckDatails(5)">
			</image>
		</view>
		<!-- 订单确认 -->
		<uni-popup ref="orderpopup" type="bottom" :mask-click="false">
			<view class="order">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="order-start ">
						<view>确认订单</view>
						<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/cancelss.png"
							@click="endDatails">
						</image>
					</view>
					<view class="order-body flex fdc">
						<view class="body-start f-ac-jb" style="position: relative;">
							<view>订单金额</view>
							<view>￥<text>{{priceSum}}</text></view>
						</view>
						<view class="body-end f-ac-jb">
							<view>优惠劵</view>
							<view class="f-ac" @click="openConpon">
								<view v-if="conponyou != 0" style="color: #FC4446;">-￥({{conponyou}})</view>
								<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/leftRow.png">
								</image>
							</view>
						</view>
						<view class="body-end f-ac-jb">
							<view>欧气石抵扣</view>
							<view v-if="flage" style="box-sizing: border-box;height: 50rpx !important; ">
								<text style="color: #FC4446;" v-if="dikounumss != ''">({{dikounumss}}欧气石</text>
								<text v-if="dikoustone > 0" style="color: #FC4446;">抵扣￥{{dikoustone}})</text>
							</view>
						</view>
					</view>
					<view class="order-end">
						<view class="end-top f-ac" @click="switchPay(1)">
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/Oushi.png"></image>
							<view>欧气石<text>(剩余{{money}})</text>
							</view>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeTrue.png"
								v-if="paymentone"></image>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeFalse.png"
								v-else>
							</image>
						</view>
						<!-- #ifdef APP || H5 -->
						<view class="end-top f-ac" @click="switchPay(2)" style="margin-top: 20rpx;">
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/Alipay.png"></image>
							<view>支付宝</view>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeTrue.png"
								v-if="paymenttwo"></image>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeFalse.png"
								v-else>
							</image>
						</view>
						<!-- #endif -->
						<!-- #ifndef APP -->
						<view class="end-top f-ac" @click="switchPay(3)" style="margin-top: 20rpx;">
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/wx.png"></image>
							<view>微信</view>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeTrue.png"
								v-if="paymentthree"></image>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeFalse.png"
								v-else>
							</image>
						</view>
						<!-- #endif -->

						<!-- #ifdef APP -->
						<view class="end-top f-ac" @click="switchPay(3)" v-if="opinifs == 1" style="margin-top: 20rpx;">
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/wx.png"></image>
							<view>微信</view>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeTrue.png"
								v-if="paymentthree"></image>
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeFalse.png"
								v-else>
							</image>
						</view>
						<!-- #endif -->

					</view>
					<!-- <view class="order-bottom">
						抽奖存在概率性，请谨慎购买
						1.概率说明:平台内所有盲盒均为实物盲盒，100%开出实物;平台中的盲盒都会成套出售，该套盲盒已包含对应的所有商品，其中普通款开出的概率相同，如内含隐藏款则随机替换其中一款普通款（即普通款概率+隐藏款概率=100%)。
						1.概率说明:平台内所有盲盒均为实物盲盒，100%开出实物;平台中的盲盒都会成套出售，该套盲盒已包含对应的所有商品，其中普通款开出的概率相同，如内含隐藏款则随机替换其中一款普通款（即普通款概率+隐藏款概率=100%)。
					</view> -->
					<view v-html="data" class="order-bottom">

					</view>
					<view class="order-button">
						<view class="button-top f-jc-ac" @click="Jumpuser">
							<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/changeTrue.png">
							</image>
							<view>我已阅读并同意<text>《用户协议》</text></view>
						</view>
						<view class="button-bottom" @tap="$u.throttle(getPayment, 500)">
							确定购买 ￥{{Orderamount}}
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 获奖-->
		<uni-popup ref="Awardpopup" type="center" :mask-click="false">
			<view class="Award">
				<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/rewardBgi3.png" class="imgs">
				</image>
				<view class="f-jc-ac fww">
					<!-- 一发 -->
					<view class="award-new" v-for="(value,index) in awardArr" :key="index" v-if="awardArr.length == 1">
						<view>
							<image :src="value.cate_imgurl" class="imgss"></image>
							<image :src="value.imgurl" class="imgsss"></image>
							<view class="new-view Multiline">
								{{value.goods_title}}
							</view>
						</view>
						<view class="new-views" @click.stop="getduihaunss(value.orderlist_id,index)">
							可打包{{value.exchange_stone}}欧气石
						</view>
					</view>
					<!-- 三发 -->
					<view class="award-news" v-for="(value,index) in awardArr" :key="index" v-if="awardArr.length == 3">
						<view>
							<image :src="value.cate_imgurl" class="imgss"></image>
							<image :src="value.imgurl" class="imgsss"></image>
							<view class="new-view Multiline">
								{{value.goods_title}}
							</view>
						</view>
						<view class="new-views" @click.stop="getduihaunss(value.orderlist_id,index)">
							可打包{{value.exchange_stone}}欧气石
						</view>
					</view>
					<!-- 五发 -->
					<view class="award-newss" v-for="(value,index) in awardArr" :key="index"
						v-if="awardArr.length == 5">
						<view>
							<image :src="value.cate_imgurl" class="imgss"></image>
							<image :src="value.imgurl" class="imgsss"></image>
							<view class="new-view Multiline">
								{{value.goods_title}}
							</view>
						</view>
						<view class="new-views" @click.stop="getduihaunss(value.orderlist_id,index)">

							可打包{{value.exchange_stone}}欧气石
						</view>
					</view>
				</view>
				<view class="award-end">
					<view class="top" @click="getduihuan">
						<!-- -->
						<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/rewardBgi2.png"></image>
						<view>全部打包</view>
					</view>
					<view class="end" @click="endaward">
						<image src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/rewardBgi2.png"></image>
						<view>放入仓库</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup" type="center">
			<view class="zhao"></view>
			<view class="dhboxs">
				<image class="dhtitbox"
					src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/luckeightssss.png">
				</image>
				<view class="choubox" v-for="(b,v) in awardArr.length" :key="v">
					<view class="choulist">
						<view class="choulists" :style="moveCss[v]">
							<view class="jp_img animated  infinite" v-for="(a,x) in items[v]" :key="x"
								:style="[{backgroundImage:`url(${a.cate_backimgurl})`}]">
								<image :src="a.imgurl" style="width: 100rpx;height: 110rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="dhxian"></view>
				<image class="dhbtmbox" src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/lucksix.png">
				</image>
			</view>
			<image class="tiaobox" @click="tiaofun()"
				src="https://kaixiang.languowangluo.cn/wechat/static/newIndex/skipTwo.png"></image>
		</uni-popup>


		<!-- 优惠劵 -->
		<uni-popup ref="Conponpopup" type="bottom">
			<view class="quanbox">
				<view class="quan_top">
					<image @click="closegs()" class="delbox"
						src="https://kaixiang.languowangluo.cn/wechat/static/index/del.png"></image>
					<view>优惠券</view>
					<view class="clstoview">
						<view class="qiehuan">
							<view @click="getlist(1)">
								<view :class="shows==1?'xzs':'wzs'">可用优惠券({{quandata.count1}})</view>
								<view :class="shows==1?'xzt':'wzt'"></view>
							</view>
							<view @click="getlist(2)">
								<view :class="shows==2?'xzs':'wzs'">不可用优惠券({{quandata.count2}})</view>
								<view :class="shows==2?'xzt':'wzt'"></view>
							</view>
						</view>
					</view>
					<view class="yh_ts" v-if="data.coupon_money>0">已选中优惠券，共抵扣<text>{{data.coupon_money}}</text></view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view>
						<view class="yhitm" v-if="shows==1" v-for="a in qdata" @click="setcoupon(a.id)">
							<view class="yhlf">
								<view class="yhje"><text>￥</text>{{a.money}}</view>
								<view class="yhmj">消费满{{a.out_money*1}}元可用</view>
							</view>
							<view class="yhrt">
								<text class="yhclass">{{a.goods_title}}</text>
								<view class="yhtype">{{a.title}}</view>
								<view class="yhitme">{{a.start_time}}至{{a.end_time}}</view>
							</view>
							<image class="yhxz"
								:src="coupon_id==a.id?'https://kaixiang.languowangluo.cn/wechat/static/index/dhty.png':'https://kaixiang.languowangluo.cn/wechat/static/change/wx_ic.png'">
							</image>
						</view>
						<view class="yhitms" v-if="shows==2" v-for="a in qdata">
							<view class="yhlfs">
								<view class="yhjes"><text>￥</text>{{a.money}}</view>
								<view class="yhmjs">消费满{{a.out_money*1}}元可用</view>
							</view>
							<view class="yhrts">
								<text class="yhclasss">{{a.goods_title}}</text>
								<view class="yhtypes">{{a.title}}</view>
								<view class="yhitmes">{{a.start_time}}至{{a.end_time}}</view>
							</view>
							<image class="yhxzs" src="https://kaixiang.languowangluo.cn/wechat/static/index/yhysy.png">
							</image>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="tanchu" type="center">
			<view class="tanchu">
				<view>成功打包{{tanchu}}欧气石</view>
			</view>
		</uni-popup>
		<uni-popup ref="tanchus" type="center">
			<view class="tanchu">
				<view>您打包过了</view>
			</view>
		</uni-popup>
		<view class="zzz" ref="refDivName"></view>
	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage/lff-barrage4.vue';
	// import SlotMachine from '@/components/canvas/uni/machine.vue' // 老虎机
	export default {
		components: {
			lffBarrage,
			// SlotMachine
		},
		data() {
			return {
				data: '',
				tanchu: '',
				background: {
					backgroundColor: '#00000000',
				},
				titleName: '',
				popupflag: false,
				// 下拉刷新配置信息
				downOption: {
					auto: false, //是否在初始化完毕之后自动执行一次下拉刷新
					use: true // 是否下拉刷新
				},

				// 上拉加载的配置
				upOption: {
					use: true, //是否上拉加载
					page: {
						size: 10 // 每页数据的数量,默认10
					}
				},
				prizes: [],
				slots: [],
				lffArr: [],
				//中赏记录标识
				record: false,
				//导航
				rewardArr: [{
					id: '',
					name: '全部'
				}, {
					id: 2,
					name: '史诗'
				}, {
					id: 3,
					name: '传说'
				}, {
					id: 4,
					name: '神话'
				}, ],
				//导航切换标识
				show: '',
				//中奖弹出框内容
				awardArr: [],
				//详情id
				detailsID: '',
				//详情内容
				detaildNew: '',
				//详情商品
				cateShop: '',
				//抽赏商品列表
				ShopList: '',
				//中赏记录
				Winningrecord: '',
				timer: null,
				//页数
				pages: '',
				//订单金额
				Orderamount: '',
				OrderamountTol: 0,
				shows: 1,
				quandata: '',
				data: '',
				coupon_id: '',
				qdata: '',
				num: 1,
				paymentone: true,
				//#ifdef APP
				paymenttwo: true,
				//#endif
				//#ifndef APP
				paymenttwo: false,
				//#endif
				//#ifdef APP
				paymentthree: false,
				//#endif
				//#ifndef APP
				paymentthree: true,
				//#endif
				//用户金额
				money: '',
				//抽奖
				OrderList: [],
				canvasKey: 666,
				rollTimer: null, //动画定时器句柄
				leftM: 10, //指针停止位置的偏移量  用来计算弹出框的初始位置
				moveCss: [], //奖励滚动组件的滑动的动画效果css
				itemWidth: 164, //每张卡牌的宽度
				luckyNums: 0, //中奖位置
				luckydata: [], //中奖位置数组
				//#ifndef APP
				lnStart: 50, //中奖位置区间开始
				lnEnd: 60, //中奖位置区间结束
				//#endif

				//#ifdef APP
				lnStart: 50, //中奖位置区间开始
				lnEnd: 60, //中奖位置区间结束
				//#endif
				items: [], //滚动的卡片列表
				awardItem: [], //中奖道具
				tiaotype: 1,
				gudata: [],
				// 适配手机
				left_px: '',
				//优惠券优惠
				conponyou: 0,
				//打包ID
				orderListID: [],
				//打包单个
				orderListOne: [],
				//音频
				Audio: '',
				oneprice: '',
				threeprice: '',
				fiveprice: '',
				dikoustone: '',
				dikounumss: '',
				flage: '',
				numssss: '',
				priceSum: '',
				priceSums: '',
				timeall: true,
				titles: '',
				order_id: '',
				timeAll: true,
				timeAlls: true,
				opinif: "",
				flagTrue: true,
				plus: ''
			}
		},
		onLoad(e) {
			console.log(e);
			let that = this
			that.detailsID = e.goodsid
			// #ifdef APP
			that.plus = plus.os.name
			// #endif

			const Audio = uni.createInnerAudioContext()
			Audio.src = 'https://kaixiang.languowangluo.cn/wechat/static/newIndex/Z3.mp3'
			that.Audio = Audio

			that.req({
				url: 'danye',
				data: {
					type: 14
				},
				success: function(res) {
					that.data = res.data.content
				}
			})

			//#ifdef H5
			// this.order_id = e.order_id
			if (e.order_id) {
				if (e.time != uni.getStorageSync('time')) {
					uni.setStorageSync('time', e.time);
					that.getH5(e.order_id, e.num, e.goods_id);
				}
			}
			//#endif
		},
		// onReady() {
		// 	this.$refs.tanchu.open()
		// },
		onShow() {
			this.getShopList()
			this.getRewDet()
			this.getUser()
			this.req({
				url: 'is_open',
				success: res => {
					uni.setStorageSync('is_open', res.data.is_open);
					this.opinif = res.data.is_open
				}
			})
		},
		methods: {
			//h5专用
			getH5(e, num, goodsid) {
				let that = this
				that.req({
					url: 'drawopenbox',
					data: {
						order_id: e,
						num: num
					},
					success: res => {
						that.req({
							url: 'open_info',
							data: {
								goods_id: goodsid,
								type: 1,
								cate_id: ''
							},
							Loading: true,
							success: (item) => {
								if (item.data
									.orderlist
									.length > 0) {
									that.lffArr =
										''
									that.lffArr =
										item.data
										.orderlist;
									setTimeout(
										() => {
											that.colrdo()
										}, 500)
								}
							}
						})
						that.awardArr = res.data.data
						that.awardArr.forEach((value,
							index) => {
							that.orderListID.push(value
								.orderlist_id)
						})
						that.OrderList = []
						that.ShopList.forEach((value,
							index) => {
							res.data.goodslist_id
								.forEach((v, i) => {
									if (v == value
										.id) {
										that.OrderList
											.push(
												index
											)
									}
								})
						})
						setTimeout(() => {
							that.openBox(that.awardArr
								.length)
						}, 500)

					}
				})
			},
			//跳转用户协议
			Jumpuser() {
				uni.navigateTo({
					url: '/pages/my/treaty/servicexy'
				})
			},
			//返回
			JumpBase() {
				uni.navigateBack({})
			},
			//全部打包
			getduihuan() {
				let arr = ''
				let num = 0
				let arrs = []
				this.flagTrue = true

				for (var a = 0; a < this.awardArr.length; a++) {
					if (this.awardArr[a].orderlist_id) {
						// console.log(this.awardArr[a].orderlist_id);
						arr += this.awardArr[a].orderlist_id + ','
						num += this.awardArr[a].exchange_stone
					}
				}
				this.req({
					url: 'drawlist_duihuan_order',
					data: {
						orderlist_id: arr
					},
					success: res => {
						if (res.status == 1) {
							this.tanchu = res.data.stone
							this.$refs.tanchu.open()
							this.$refs.Awardpopup.close()
							setTimeout(() => {
								this.$refs.tanchu.close()

							}, 1000)
							this.getUser()

						} else {
							this.$refs.tanchus.open()
							this.$refs.Awardpopup.close()
							setTimeout(() => {
								this.$refs.tanchus.close()

							}, 1000)
							this.getUser()

						}
					}
				})
			},
			getduihaunss(e, num) {
				// this.orderListID
				this.orderListOne.push(e)

				if (!this.timeAll) {
					return;
				}

				this.timeAll = false
				this.req({
					url: 'drawlist_duihuan_order',
					data: {
						orderlist_id: e
					},
					success: res => {
						this.timeAll = true
						if (res.status == 1) {
							this.tanchu = res.data.stone
							this.$refs.tanchu.open()
							this.$refs.Awardpopup.close()
							setTimeout(() => {
								this.$refs.tanchu.close()

							}, 1000)
							this.getUser()
						} else {
							this.$refs.tanchus.open()
							this.$refs.Awardpopup.close()
							setTimeout(() => {
								this.$refs.tanchus.close()

							}, 1000)
							this.getUser()
						}
					}
				})

			},
			//切换图片
			getImage(e, title, price) {
				this.detaildNew.imgurl = e
				this.detaildNew.title = title
				this.detaildNew.price = price
			},
			openBox(v) {
				let that = this
				// #ifdef H5
				// console.log(this.$refs.refDivName.$el.offsetWidth)
				that.left_px = that.$refs.refDivName.$el.offsetWidth
				// #endif
				// #ifndef H5
				// console.log(uni.createSelectorQuery().in(this).select(".zzz"))
				uni.createSelectorQuery().in(that).select(".zzz").boundingClientRect(data => {
					//data  可以打印data输出看详细数据，有很多数据信息
					// console.log(data)
					that.left_px = data.width; //表示元素宽度
					// that.left_px = 104; //表示元素宽度
					// console.log(that.left_px);
				}).exec();
				// #endif
				//初始化数据
				that.tiaotype = 1;

				that.InitPageModel(v);
				// return
				//150ms后显示奖励皮肤滚动组件
				// debugger
				// return
				// #ifdef APP
				if (this.plus == 'iOS') {
					setTimeout(() => {
						//500ms 之后开始奖励列表滑动
						that.rollTimer = setTimeout(() => that.startScroll(v), 150);
					}, 150);
				} else {
					if (that.num == 5) {
						setTimeout(() => {
							//500ms 之后开始奖励列表滑动
							that.rollTimer = setTimeout(() => that.startScroll(v), 2000);
						}, 100);
					} else if (that.num == 3) {
						setTimeout(() => {
							//500ms 之后开始奖励列表滑动
							that.rollTimer = setTimeout(() => that.startScroll(v), 500);
						}, 150);
					} else if (that.num == 1) {
						setTimeout(() => {
							//500ms 之后开始奖励列表滑动
							that.rollTimer = setTimeout(() => that.startScroll(v), 150);
						}, 150);
					}
				}


				// #endif

				// #ifndef APP
				setTimeout(() => {
					//500ms 之后开始奖励列表滑动
					that.rollTimer = setTimeout(() => that.startScroll(v), 150);
				}, 150);
				// #endif

			},
			//随机数
			getRand(start, end) {
				return Math.floor(Math.random() * (end - start + 1) + start);
			},
			getItem() {
				let r = this.getRand(0, (this.ShopList.length - 1));
				let item;
				item = this.ShopList[r];
				return item;
			},
			//初始化列表
			InitPageModel(v) {
				var that = this;
				//随机一个总数
				that.items = [];
				//中间号码的列队
				that.luckydata = [];
				//中奖卡片的位置
				for (var a = 0; a < v; a++) {
					var jldata = [];
					that.luckyNums = that.getRand(that.lnStart, that.lnEnd);
					that.luckydata.push(that.luckyNums)
					let loopNum = that.lnEnd - that.luckyNums < 4 ? that.luckyNums + 4 : that.lnEnd;
					// console.log(that.gudata)
					for (let i = 0; i < loopNum; i++) {
						let item = {};
						if (i == that.luckyNums) {
							item = that.ShopList.filter((item) => item.id == that.awardArr[a].goodslist_id)[
								0]; //把奖励加到列表里

							that.awardItem.push(item); //拿到奖励的各个参数
						} else {
							item = that.getItem();
						}
						jldata.push(item);
					}
					that.items[a] = jldata;
				}
				that.$nextTick(function() {
					that.openg()
				})
			},
			customBack() {

				uni.redirectTo({
					url: '/pages/index/reward'
				})
			},
			//滑动效果
			startScroll() {
				var that = this;
				that.$nextTick(function() {
					if (that.rollTimer != null) {
						setTimeout(() => {
							that.Audio.play()
							that.Audio.onPlay(function() {
								// console.log('onPlay');
							});
						}, 500)
					} else {
						setTimeout(() => {
							that.Audio.stop()
						}, 500)
					}
					// #ifdef APP
					that.moveCss = []
					// #endif
					setTimeout(() => {
						for (var a = 0; a < that.luckydata.length; a++) {
							let m = -24;
							that.leftM = m;
							// debugger
							var yanzi = 'left:-' + ((that.luckydata[a] - 2) * that.left_px - m) +
								'px;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
							that.moveCss.push(yanzi)
							// console.log(yanzi);
							//6s 动画结束后 开始弹出奖励图片，6500ms后执行
						}
					}, 500);
					that.rollTimer = setTimeout(() => {
						// display和动画会有前后执行的冲突，所以加上10ms延时处理
						that.closeg()
						that.$refs.popup.close()
						that.scaleCss = [];
						that.scaleCsss = [];

						setTimeout(() => {
							that.Audio.stop()
							that.Audio.onStop(function() {
								// console.log('onStop');
							});
						}, 3000)

						setTimeout(() => {
							// #ifdef APP
							that.moveCss = [];
							//奖品按顺序淡出
							for (var a = 0; a < that.luckydata.length; a++) {
								setTimeout(() => {
									// 奖品显示框
									var left = 'left:0'
									var scale = 'opacity:1 ;transition:all .8s;'
									var scales =
										'opacity:0 ;transform: scale(5);transition:all 2.5s;'
									that.scaleCss.push(scale)
									that.scaleCsss.push(scales)
									that.moveCss.push(left)
								}, 200);
							}
							// #endif

							that.$refs.Awardpopup.open()
							// #ifndef APP
							that.moveCss = [];
							// #endif
							that.items = [];
							that.luckydata = [];
							setTimeout(() => {
								that.getWinnerecord()
							}, 500)
						}, 500);
					}, 9000);
				})
			},
			openg() {
				this.$refs.popup.open()
			},
			closeg() {
				this.$refs.popup.close()
			},
			tiaofun() {
				var that = this;
				clearTimeout(that.rollTimer);

				that.rollTimer = null
				// console.log(that.rollTimer);
				that.closeg()
				that.scaleCss = [];
				that.scaleCsss = [];
				setTimeout(() => {
					that.Audio.pause()
				}, 500)


				setTimeout(() => {
					that.Audio.seek(10)
				}, 700)

				setTimeout(() => {
					that.Audio.play()
				}, 900)

				setTimeout(() => {
					// #ifdef APP
					that.moveCss = [];
					//奖品按顺序淡出
					for (var a = 0; a < that.luckydata.length; a++) {
						setTimeout(() => {
							// 奖品显示框
							var left = 'left:0'
							var scale = 'opacity:1 ;transition:all .8s;'
							var scales =
								'opacity:0 ;transform: scale(5);transition:all 2.5s;'
							that.scaleCss.push(scale)
							that.scaleCsss.push(scales)
							that.moveCss.push(left)
						}, 200);
					}
					// #endif

					that.$refs.Awardpopup.open()
					// #ifndef APP
					that.moveCss = [];
					// #endif
					that.items = [];
					that.luckydata = [];

					setTimeout(() => {
						that.getWinnerecord()
					}, 500)
				}, 800);
			},
			//用户信息
			getUser() {
				this.req({
					url: 'user',
					success: res => {
						this.money = res.data.integral
					}
				})
			},
			//点击支付
			getPayment() {
				var that = this;
				if (!that.timeall) {
					return;
				}

				that.timeall = false

				let type = -1
				let isstone
				//#ifdef MP
				if (that.paymentthree && that.paymentone) {
					type = 4
					isstone = 1
				} else if (that.paymentone) {
					isstone = 1
				} else if (that.paymentthree) {
					isstone = 0
					type = 4
				}
				//#endif

				//#ifdef H5
				if (that.paymentthree && that.paymentone) {
					type = 6
					isstone = 1
				} else if (that.paymentone) {
					isstone = 1
				} else if (that.paymentthree) {
					isstone = 0
					type = 6
				} else if (that.paymenttwo && that.paymentone) {
					type = 2
					isstone = 1
				} else if (that.paymenttwo) {
					isstone = 0
					type = 2
				}
				//#endif

				//#ifdef APP
				if (that.paymentthree && that.paymentone) {
					type = 5
					isstone = 1
				} else if (that.paymenttwo && that.paymentone) {
					type = 1
					isstone = 1
				} else if (that.paymentone) {
					isstone = 1
				} else if (that.paymentthree) {
					isstone = 0
					type = 5
				} else if (that.paymenttwo) {
					isstone = 0
					type = 1
				}
				//#endif

				// console.log(type);
				// console.log(isstone);
				that.req({
					url: 'draworderadd',
					data: {
						goods_id: that.detailsID,
						num: that.num,
						coupon_id: that.coupon_id,
						pay_type: type,
						is_stone: isstone
					},
					success: res => {
						that.timeall = true
						// console.log(res);
						// return;
						if (res.code == 2003) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						if (type == 2 || res.data.order_id) {
							if (res.code == 2001) {
								that.$refs.orderpopup.close()
								that.flagTrue = true
								//#ifdef MP
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res
										.data.timeStamp,
									nonceStr: res
										.data.nonceStr,
									package: res
										.data.package,
									signType: 'MD5',
									paySign: res
										.data.paySign,
									success: (data) => {
										// success && success(res.data)
										that.flagTrue = true
										that.req({
											url: 'drawopenbox',
											data: {
												order_id: res.data.order_id,
												num: that.num
											},
											success: res => {
												// console.log(res, 'drawopenbox');
												that.req({
													url: 'open_info',
													data: {
														goods_id: that
															.detailsID,
														type: 1,
														cate_id: ''
													},
													Loading: true,
													success: (item) => {
														if (item.data
															.orderlist
															.length > 0) {
															that.lffArr =
																''
															that.lffArr =
																item.data
																.orderlist;
															setTimeout(
																() => {
																	that.colrdo()
																}, 500)
														}
													}
												})
												that.awardArr = res.data.data
												that.awardArr.forEach((value,
													index) => {
													that.orderListID.push(value
														.orderlist_id)
												})
												that.OrderList = []
												that.ShopList.forEach((value,
													index) => {
													res.data.goodslist_id
														.forEach((v, i) => {
															if (v == value
																.id) {
																that.OrderList
																	.push(
																		index
																	)
															}
														})
												})
												setTimeout(() => {
													that.openBox(that.awardArr
														.length)
												}, 500)

											}
										})
									},
									fail: (err) => {

										that.flagTrue = true
										// console.log(
										// 	'支付失败',
										// 	err);
										uni.showToast({
											title: '支付取消',
											icon: 'none',
											duration: 2000
										})
										that.req({
											url: 'open_info',
											data: {
												goods_id: that.detailsID,
												type: 1,
												cate_id: ''
											},
											Loading: true,
											success: (item) => {
												if (item.data.orderlist.length > 0) {
													that.lffArr = ''
													that.lffArr = item.data.orderlist;
													setTimeout(() => {
														that.colrdo()
													}, 500)
												}
											}
										})
									}
								});
								//#endif

								//#ifdef H5
								if (res.data.pay_type == 6) {
									var a = document.createElement('a');
									a.setAttribute('href', res.data.mweb_url);
									document.body.appendChild(a);
									a.click();
									that.flagTrue = true
									// uni.setStorageSync('order_id', '';

									// window.location.href = res.data.mweb_url + '&redirect_url=' +
									//            encodeURIComponent(`https://testkx.languowangluo.cn/h5/index.html#/pages/index/rewardDetali?order_id`);
								} else if (res.data.pay_type == 2) {
									const div = document.createElement('div');
									div.innerHTML = res.data.result;
									document.body.appendChild(div);
									document.forms.alipaysubmit.submit();
									that.flagTrue = true
								}
								//#endif

								// #ifdef APP
								uni.requestPayment({
									provider: res.data.pay_type == 1 ? 'alipay' : 'wxpay',
									orderInfo: res.data.response, //微信、支付宝订单数据
									success: ress => {
										that.flagTrue = true
										that.req({
											url: 'drawopenbox',
											data: {
												order_id: res.data.order_id,
												num: that.num
											},
											success: res => {
												that.req({
													url: 'open_info',
													data: {
														goods_id: that
															.detailsID,
														type: 1,
														cate_id: ''
													},
													Loading: true,
													success: (item) => {
														if (item.data
															.orderlist
															.length > 0) {
															that.lffArr =
																''
															that.lffArr =
																item.data
																.orderlist;
															setTimeout(
																() => {
																	that.colrdo()
																}, 500)
														}
													}
												})
												that.awardArr = res.data.data
												that.awardArr.forEach((value,
													index) => {
													that.orderListID.push(value
														.orderlist_id)
												})
												that.OrderList = []
												that.ShopList.forEach((value,
													index) => {
													res.data.goodslist_id
														.forEach((v, i) => {
															if (v == value
																.id) {
																that.OrderList
																	.push(
																		index
																	)
															}
														})
												})
												setTimeout(() => {
													that.openBox(that.awardArr
														.length)
												}, 500)

											}
										})
									},
									fail: (err) => {
										console.log(err, 'aaaaaaaa');
										that.flagTrue = true
										uni.showToast({
											title: '支付取消',
											icon: 'none',
											duration: 2000
										})
										that.req({
											url: 'open_info',
											data: {
												goods_id: that.detailsID,
												type: 1,
												cate_id: ''
											},
											Loading: true,
											success: (item) => {
												if (item.data.orderlist.length > 0) {
													that.lffArr = ''
													that.lffArr = item.data.orderlist;
													setTimeout(() => {
														that.colrdo()
													}, 500)
												}
											}
										})
									},
								});
								// #endif

							} else {
								that.$refs.orderpopup.close()
								that.req({
									url: 'drawopenbox',
									data: {
										order_id: res.data.order_id,
										num: that.num,
									},
									success: res => {
										that.req({
											url: 'open_info',
											data: {
												goods_id: that.detailsID,
												type: 1,
												cate_id: ''
											},
											// Loading: true,
											success: (item) => {

												if (item.data.orderlist.length > 0) {
													that.lffArr = ''
													that.lffArr = item.data.orderlist;
													setTimeout(() => {
														that.colrdo()
													}, 500)
												}
											}
										})
										that.awardArr = res.data.data
										that.awardArr.forEach((value,
											index) => {
											that.orderListID.push(value
												.orderlist_id)
										})
										that.OrderList = []
										that.ShopList.forEach((value,
											index) => {
											res.data.goodslist_id
												.forEach((v, i) => {
													if (v == value
														.id) {
														that.OrderList
															.push(
																index
															)
													}
												})
										})
										setTimeout(() => {
											that.openBox(that.awardArr.length)
										}, 500)
									}
								})
							}
						} else {
							// #ifndef APP
							that.$refs.orderpopup.close()
							// #endif
						}
					}
				})
			},

			//支付切换
			switchPay(e) {
				switch (e) {
					case 1:
						this.paymentone = !this.paymentone
						if (this.paymentone == false) {
							this.flage = false
							this.Orderamount = this.numssss
							if (this.priceSums) {
								this.Orderamount = this.priceSums
							}
						} else {
							this.flage = true
							this.getWX()
						}
						break;
					case 2:
						this.paymenttwo = !this.paymenttwo
						this.paymentthree = false
						break;
					case 3:
						this.paymentthree = !this.paymentthree
						this.paymenttwo = false
						break;
				}
			},
			//点击微信支付
			getWX() {
				this.req({
					url: 'draw_dikou',
					data: {
						goods_id: this.detailsID,
						num: this.num,
						coupon_id: this.coupon_id,
					},
					success: res => {
						this.dikounumss = res.data.dikou_stone
						this.dikoustone = res.data.dikou_money
						this.OrderamountTol = res.data.new_price
						this.Orderamount = res.data.new_price
					}
				})
			},
			//优惠劵
			setcoupon(id) {
				var that = this;
				that.coupon_id = id;
				that.$refs.Conponpopup.close()
				that.req({
					url: 'ordermoney',
					data: {
						goods_id: that.detailsID,
						num: that.num,
						coupon_id: that.coupon_id,
					},
					success: function(res) {
						that.data = res.data.goods;
						that.coupon_id = res.data.goods.coupon_id;
						that.OrderamountTol = res.data.goods.total
						that.conponyou = res.data.goods.coupon_money
						that.priceSums = that.priceSum - that.conponyou
						that.getWX()
					}
				})
			},
			getlist(v) {
				var that = this;
				that.shows = v;
				that.req({
					url: 'drawcoupon',
					data: {
						goods_id: that.detailsID,
						num: that.num,
						type: that.shows
					},
					success: function(res) {
						that.quandata = res.data;
						that.qdata = res.data.list;
					}
				})
			},
			//点击优惠劵
			openConpon() {
				this.$refs.Conponpopup.open()
				this.getlist(1)
			},
			closegs() {
				this.$refs.Conponpopup.close()
			},
			//抽赏详情接口 
			getRewDet() {
				console.log(this.detailsID);
				this.req({
					url: 'draw_detail',
					data: {
						goods_id: this.detailsID
					},
					success: res => {
						this.detaildNew = res.data.goods
						this.cateShop = res.data.cate
						this.oneprice = res.data.goods.one_price
						this.threeprice = res.data.goods.three_price
						this.fiveprice = res.data.goods.five_price
						// this.priceSumss = res.data.goods.price
						this.titles = res.data.goods.title
						this.titleName = this.titles
						this.req({
							url: 'open_info',
							data: {
								goods_id: this.detailsID,
								type: 1,
								cate_id: ''
							},
							Loading: true,
							success: (item) => {
								if (item.data.orderlist.length > 0) {
									this.lffArr = item.data.orderlist;
									setTimeout(() => {
										this.$refs.lffBarrage.add(this.lffArr[0]);
										this.colrdo()
									}, 500)
								}
							}
						})
					}
				})
			},
			//弹幕清空
			colrdo() {
				var that = this;
				var a = 0;
				clearInterval(that.timer)
				that.timer = setInterval(function() {
					that.$refs.lffBarrage && that.$refs.lffBarrage.add(
						that.lffArr[a]
					);
					if (a == that.lffArr.length - 1) {
						clearInterval(that.timer)
						that.colrdo()
					}
					a++;
				}, 6000)

			},
			//抽赏飘窗
			getopenin() {
				let that = this
				that.lffArr = ''
				that.req({
					url: 'open_info',
					data: {
						goods_id: that.detailsID,
						type: 1,
						cate_id: ''
					},
					Loading: true,
					success: (item) => {
						if (item.data.orderlist.length > 0) {
							that.lffArr = ''
							that.lffArr = item.data.orderlist;
							setTimeout(() => {
								that.$refs.lffBarrage && that.$refs.lffBarrage.add(that.lffArr[0]);
								that.colrdo()
							}, 500)
						}
					}
				})
			},
			//抽赏商品列表
			getShopList() {
				this.prizes = []
				this.req({
					url: 'drawlist',
					data: {
						goods_id: this.detailsID
					},
					success: res => {
						this.ShopList = res.data;
					}
				})
			},
			//中赏记录
			getWinnerecord() {
				let that = this
				that.req({
					url: 'drawopeninfo',
					data: {
						goods_id: that.detailsID,
						cate_id: that.show,
					},
					success: res => {
						that.Winningrecord = res.data.list;
					}
				})
			},
			start() {
				// console.log(start);
				// 获取抽奖组件实例
				const child = this.selectComponent('#myLucky')
				// 调用play方法开始旋转
				child.lucky.play()
				// 用定时器模拟请求接口
				setTimeout(() => {
					// 3s 后得到中奖索引 (假设抽到第0个奖品)
					const index = 0
					// 调用stop方法然后缓慢停止
					child.lucky.stop(index)
				}, 3000)
			},
			end(event) {
				// 中奖奖品详情
				let that = this
				// console.log('end', 111)
				that.$refs.myLucky.clean()

			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			//中赏记录切换
			Jumprecord() {
				this.record = !this.record
				this.getWinnerecord()
			},
			//导航切换
			getrewardArr(e) {
				this.show = e
				this.getWinnerecord()
			},
			//点击抽几发，出现订单
			luckDatails(e) {
				console.log(this.flagTrue);
				// #ifdef APP
				if (this.flagTrue) {
					let nums = this.oneprice * e
					this.Orderamount = nums.toFixed(2)
					this.numssss = nums.toFixed(2)
					this.priceSum = nums.toFixed(2)
					this.num = e
					this.$refs.orderpopup.open()
					this.paymentone = true
					this.flage = true
					this.getWX()
				}
				// #endif

				// #ifndef APP
				// let nums = this.oneprice * e
				// this.Orderamount = nums.toFixed(2)
				// this.numssss = nums.toFixed(2)
				// this.priceSum = nums.toFixed(2)
				// this.num = e
				// this.$refs.orderpopup.open()
				// this.paymentone = true
				// this.flage = true
				// this.getWX()


				if (this.flagTrue) {
					let nums = this.oneprice * e
					this.Orderamount = nums.toFixed(2)
					this.numssss = nums.toFixed(2)
					this.priceSum = nums.toFixed(2)
					this.num = e
					this.$refs.orderpopup.open()
					this.paymentone = true
					this.flage = true
					this.getWX()
				}


				// #endif

				// this.$refs.orderpopup.open()

				this.flagTrue = false
			},
			//关闭订单
			endDatails() {
				this.timeAlls = true
				this.flagTrue = true
				this.$refs.orderpopup.close()

			},
			//关闭中奖记录
			endaward() {
				this.$refs.Awardpopup.close()
				setTimeout(() => {
					this.Audio.stop()
				}, 500)
				this.flagTrue = true
				this.getUser()
			}
		}
	}
</script>

<style lang="scss">
	.tanchu {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		color: #fff;
		background-color: #00000000;
		font-size: 36rpx;
	}

	page {
		background-color: #000000 !important;

	}

	// page {
	// 	background-color: #000;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	overflow-x: hidden !important;
	// 	overflow-y: auto !important;
	// }

	/* 解决小程序和app滚动条的问题 */
	// ::-webkit-scrollbar {
	// 	display: none;
	// }

	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.Multiline {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	/deep/ .u-back-wrap {
		position: relative;
		z-index: 10;
	}

	/deep/ .u-navbar-content-title {
		padding-left: 150rpx;
		box-sizing: border-box;
	}

	.zzz {
		width: 164rpx;
		height: 1rpx;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
	}

	.jp_img>view:nth-of-type(1) {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		color: #ffffff;
		font-size: 24rpx;
		padding: 2rpx 4rpx 2rpx 8rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 0 0 10rpx 10rpx;
		width: 144rpx;
		height: 36rpx;
		box-sizing: border-box;
	}

	.jp_img>image {
		width: 144rpx;
		height: 144rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.jp_img {
		position: relative;
		/* margin: 62rpx auto 6rpx; */
		width: 164rpx;
		height: 144rpx;
		overflow: hidden;
		animation-delay: 9s;
		/* height: 146rpx; */
		box-sizing: border-box;
		/* border: 1rpx solid #2FB4FF; */
		/* margin-right: 20rpx; */
		/* border-radius: 6rpx; */
		/* color: transparent;
		background: linear-gradient(90deg, #A3BFFF 0%, #9FE5CF 34.9365234375%, #FFD1AF 71.923828125%, #FFB8C9 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-position: 0% 100%;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.jp_list {
		font-size: 24rpx;
		width: 204rpx;
		/* height: 200rpx; */
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		color: #FFFFFF;
	}

	.dhboxs {
		position: relative;
	}

	.dhtitbox {
		width: 750rpx;
		height: 118rpx;
		display: block;
		margin: auto;
		position: relative;
	}

	.dhtitboxsss {
		position: absolute;
		top: 5rpx;
		left: 295rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFF8FE;
	}

	.dhtopbox {
		width: 750rpx;
		height: 98rpx;
	}

	.dhbtmbox {
		width: 750rpx;
		height: 50rpx;
		margin-top: 6rpx;
	}

	.dhxian {
		width: 4rpx;
		height: calc(100% - 168rpx);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 52rpx;
		margin: auto;
		background: #FFEBFF;
		box-shadow: 0px 0px 12rpx 0px #2FB4FF;
	}

	.tiaobox {
		width: 226rpx;
		height: 96rpx;
		display: block;
		margin: 80rpx auto 0;
		position: relative;
		z-index: 20;
	}

	.choubox {
		width: 730rpx;
		height: 160rpx;
		position: relative;
		margin: auto;
		overflow: hidden;
	}

	.choulist {
		position: absolute;
		display: flex;
		margin-top: 10rpx;
	}

	.choulists {
		position: relative;
		left: -50rpx;
		display: flex;
	}

	.zhao {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.8)
	}

	page {
		background-color: #000000;
		position: relative;
	}

	.luckdraw-wrap {
		opacity: 0;
		pointer-events: none;
		transition: opacity .5s;

		&.active {
			pointer-events: auto;
			opacity: 1;
		}
	}


	//抽奖动画
	.luckdraw {
		width: 750rpx;
		height: 400rpx;
		margin-top: 60%;
		position: relative;

		.luck-start {
			position: absolute;
			top: -80rpx;
			left: 0;
			width: 100%;
			height: 102rpx;
		}

		.luck-body {
			position: absolute;
			bottom: -30rpx;
			left: 0;
			width: 100%;
			height: 41rpx;
		}

		.luck-end {
			width: 150rpx;
			height: 70rpx;
			position: absolute;
			bottom: -150rpx;
			left: 299rpx;
		}
	}

	//展示
	.Exhibition {
		width: 750rpx;
		height: 525rpx;
		position: absolute;

		/* #ifdef H5 */
		top: 100rpx;
		/* #endif */

		/* #ifndef H5 */
		top: 140rpx;
		/* #endif */
		background: url('https://kaixiang.languowangluo.cn/wechat/static/newIndex/rewardBgi4.png') no-repeat 0 0 / 100% 100%;
		z-index: 1;

		image {
			width: 274rpx;
			height: 238rpx;
		}
	}

	//展示内容
	.news {
		/* #ifdef MP */
		margin-top: 70%;
		/* #endif */

		/* #ifdef APP */
		margin-top: 75%;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 78%;
		/* #endif */
		padding: 0 29rpx 0 29rpx;
		box-sizing: border-box;

		.top {
			width: 670rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}

		.body {
			width: 670rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
			text-align: center;
		}

		.end {
			height: 90rpx;
			margin-top: 26rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FC1138;

			.end-top {
				width: 90rpx;
				height: 48rpx;
				border: 1px solid #666666;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				line-height: 48rpx;
				text-align: center;
			}

			.end-end {
				color: #fff;
				line-height: 48rpx;
			}

			.detali {
				width: 150rpx;
				height: 54rpx;
				border: 1px solid #6675DC;
				border-radius: 4rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #6675DC;
				line-height: 54rpx;
				text-align: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			color: #fff;
			font-size: 26rpx;
			margin-top: 20rpx;

			image {
				width: 69rpx;
				height: 91rpx;
				margin-bottom: 20rpx;
			}

			.bottom-start {
				width: 690rpx;
				height: 88rpx;
				background: rgba(255, 255, 255, .08);
				border-radius: 10rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-top: 20rpx;
				}
			}

			.bottom-top {
				width: 155rpx;
				margin-bottom: 20rpx;

				.start {
					position: relative;
					width: 150rpx;
					height: 155rpx;
					background: #000000;
					border: 1px solid #FC1138;
					border-radius: 4rpx;

					&>view:nth-child(2) {
						position: absolute;
						bottom: 0;
						width: 153rpx;
						height: 36rpx;
						background: rgba(252, 17, 56, .2);
						border-radius: 0rpx 0rpx 4rpx 4rpx;
						text-align: center;
					}

					.images {
						width: 130rpx;
						height: 130rpx;
						background-size: cover !important;
						background-position: center !important;
						background-repeat: no-repeat !important;
					}
				}
			}
		}
	}

	.omit {
		/* //单行省略 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 5rpx;
	}

	//底部按钮
	.button {
		width: 750rpx;
		height: 142rpx;
		background: linear-gradient(0deg, #01030F 0%, rgba(1, 3, 15, 0.3) 100%);
		position: fixed;
		bottom: 20rpx;
		padding: 0 12rpx;
		box-sizing: border-box;

		image {
			width: 234rpx;
			height: 110rpx;
		}
	}

	//订单
	.order {
		width: 750rpx;
		height: 1000rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 991rpx;
		position: relative;

		.order-start {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			margin: 40rpx auto;
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 220rpx;
			}

			view:nth-child(1) {
				margin-left: 280rpx;
			}
		}

		.order-body {
			margin-bottom: 42rpx;

			.body-start,
			.body-end {
				height: 100rpx;
				border-bottom: 1px solid #ccc;

				&>view:nth-child(1) {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}

			.body-start {
				font-size: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FC4446;

				text {
					font-size: 36rpx;
				}
			}

			.body-end {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #222222;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 16rpx;
				}
			}
		}

		.order-end {
			.end-top {
				margin-bottom: 38rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				position: relative;

				view:nth-of-type(1) {
					// width: 280rpx;
				}
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}

			image:nth-of-type(1) {
				margin-right: 22rpx;
			}

			image:nth-of-type(2) {
				// margin-left: 300rpx;
				position: absolute;
				right: 0;
			}
		}

		.order-bottom {
			margin-top: 20rpx;
			width: 685rpx;
			height: 600rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}

		.order-button {
			position: fixed;
			width: 750rpx;
			height: 192rpx;
			background: #FFFFFF;
			bottom: 0;
			padding: 29rpx 0rpx 0 0;
			box-sizing: border-box;
			left: 0;

			.button-top {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #222222;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 14rpx;
				}

				text {
					color: #156EE5;
				}
			}

			.button-bottom {
				width: 690rpx;
				height: 88rpx;
				background: linear-gradient(-90deg, #F0C3DE 0%, #C8E6F9 100%);
				border-radius: 20rpx;
				line-height: 88rpx;
				text-align: center;
				margin: 30rpx auto 0;
			}
		}
	}

	//获奖
	.Award {
		width: 750rpx;
		height: 100vh;
		position: relative;
		background-color: rgba(0, 0, 0, .7);
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);

		.imgs {
			width: 750rpx;
			height: 89rpx;
			/* #ifndef H5 */
			margin-top: 35%;
			/* #endif */

			/* #ifdef H5 */
			margin-top: 20%;
			/* #endif */
		}

		.fww {
			&>.award-news:nth-child(1) {
				width: 278rpx;
				margin: 44rpx 235rpx;
				left: 80rpx;
				top: 2rpx;
			}

			&>.award-news:nth-child(2) {
				width: 228rpx;
			}
		}

		.award-newss {
			width: 228rpx;
			height: 350rpx;
			position: relative;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 20rpx;
			text-align: center;
			margin: 44rpx auto !important;

			.imgss {
				position: absolute;
				top: 0;
				left: 0;
				width: 218rpx;
				height: 256rpx;
			}

			.imgsss {
				position: absolute;
				top: 47rpx;
				left: 55rpx;
				width: 110rpx;
				height: 110rpx;
			}

			.new-view {
				width: 183rpx;
				height: 58rpx;
				position: absolute;
				top: 178rpx;
				left: 17rpx;
				color: #FFFFFF;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.new-views {
				width: 215rpx;
				height: 58rpx;
				background: #000000;
				border: 1px solid #C7CDFB;
				position: absolute;
				top: 280rpx;
				left: 2rpx;
				color: #C7CDFB;
				line-height: 58rpx;
			}
		}

		.award-news {
			width: 278rpx;
			height: 350rpx;
			position: relative;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			text-align: center;
			margin: 44rpx auto;
			left: 0 !important;
			top: 0 !important;

			.imgss {
				position: absolute;
				top: 0;
				left: 0;
				width: 278rpx;
				height: 324rpx;
			}

			.imgsss {
				position: absolute;
				top: 69rpx;
				left: 73rpx;
				width: 130rpx;
				height: 130rpx;
			}

			.new-view {
				width: 220rpx;
				height: 66rpx;
				position: absolute;
				top: 232rpx;
				left: 28rpx;
				color: #FFFFFF;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.new-views {
				width: 251rpx;
				height: 58rpx;
				background: #000000;
				border: 1px solid #C7CDFB;
				position: absolute;
				top: 340rpx;
				left: 13rpx;
				color: #C7CDFB;
				line-height: 58rpx;
			}
		}

		.award-new {
			width: 500rpx;
			height: 600rpx;
			position: relative;
			margin: 44rpx auto !important;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			text-align: center;
			left: 0 !important;
			top: 0 !important;

			.imgss {
				position: absolute;
				top: 0;
				left: 0;
				width: 500rpx;
				height: 600rpx;
			}

			.imgsss {
				position: absolute;
				top: 69rpx;
				left: 25rpx;
				width: 450rpx;
				height: 400rpx;
			}

			.new-view {
				width: 100%;
				height: 100rpx;
				position: absolute;
				line-height: 100rpx;
				top: 500rpx;
				left: 0rpx;
				color: #FFFFFF;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				text-align: center;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.new-views {
				width: 500rpx;
				height: 80rpx;
				background: #000000;
				line-height: 80rpx;
				border: 1px solid #C7CDFB;
				position: absolute;
				top: 650rpx;
				left: 0rpx;
				color: #C7CDFB;
			}
		}

		.award-end {
			position: absolute;
			bottom: 200rpx;
			left: 80rpx;

			image {
				width: 270rpx;
				height: 100rpx;
				position: absolute;
			}

			.top,
			.end {
				width: 270rpx;
				height: 100rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;

				view {
					position: absolute;
					z-index: 2;
					top: 30rpx;
					left: 70rpx;
				}
			}

			.top {
				position: absolute;
			}

			.end {
				position: absolute;
				left: 320rpx;
			}
		}
	}

	//优惠券
	.quanbox {
		width: 750rpx;
		height: 850rpx;
		background: #F7F7F7;
	}

	.quan_top {
		width: 750rpx;
		background: #FFFFFF;
		position: relative;
		margin-bottom: 30rpx;
	}

	.quan_top>view:nth-of-type(1) {
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #222222;
		padding-top: 48rpx;
	}

	.delbox {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 25rpx;
		top: 45rpx;
	}

	.qiehuan {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #F7F7F7;
	}

	.qiehuan>view {
		width: 50%;
		text-align: center;
		position: relative;
	}

	.qiehuan>view>view:nth-of-type(1) {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.wzs {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.wzt {
		width: 50rpx;
		height: 4rpx;
		background-color: transparent;
		border-radius: 1px;
	}


	.xzs {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}

	.xzt {
		width: 78rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #6BC6FF 0%, #D8A0FE 0%, #7683D9 100%);
		box-shadow: 0px 2rpx 7rpx 0px rgba(15, 66, 253, 0.41);
		border-radius: 1rpx;
		position: absolute;
		bottom: 8rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.yh_ts {
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.yh_ts text {
		color: #FF4F4D;
	}

	.yhitm {
		width: 690rpx;
		height: 190rpx;
		background: url(https://kaixiang.languowangluo.cn/wechat/static/newIndex/couponss.png) no-repeat 0 0 /100% 100%;
		margin: auto;
		margin-bottom: 30rpx;
		display: flex;
		position: relative;
	}

	.yhlf {
		width: 220rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.yhje {
		font-size: 54rpx;
		font-family: Source Han Sans CN;
		font-weight: bolder;
		color: #6675DC;
	}

	.yhje text {
		font-size: 30rpx;
		font-weight: 400;
	}

	.yhmj {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #6675DC;
	}

	.yhrt {
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.yhclass {
		width: 200rpx;
		border: 1rpx solid #FC4446;
		border-radius: 19rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FC4446;
	}

	.yhtype {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.yhitme {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.yhxz {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 30rpx;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.yhitms {
		width: 690rpx;
		height: 190rpx;
		background: url(https://kaixiang.languowangluo.cn/wechat/static/index/yhbgs.png) no-repeat 0 0 /100% 100%;
		margin: auto;
		margin-bottom: 30rpx;
		display: flex;
		position: relative;
	}

	.yhlfs {
		width: 190rpx;
		text-align: center;
	}

	.yhjes {
		font-size: 54rpx;
		font-family: Source Han Sans CN;
		font-weight: bolder;
		color: #CCCCCC;
		padding-top: 30rpx;
	}

	.yhjes text {
		font-weight: 400;
		font-size: 30rpx;
	}

	.yhmjs {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #CCCCCC;
	}

	.yhrts {
		margin-left: 40rpx;
		padding-top: 26rpx;
	}

	.yhclasss {
		padding: 7rpx 11rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 19rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #CCCCCC;
	}

	.yhtypes {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
	}

	.yhitmes {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.yhxzs {
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		right: 30rpx;
		top: 0;
		bottom: 0;
		margin: auto;
	}
</style>
